<template>
  <div class="pip-show-wrap">
    <div id="pipShow" class="pip-show"></div>
  </div>
</template>
<script>
import { each } from 'lodash'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const testPoint = [
  {
    selected: false,
    type: '1',
    lng: 104.06281355592012,
    lat: 30.691336960148348,
    posi: [462, 213]
  },
  {
    selected: false,
    lng: 104.08013288615248,
    lat: 30.691399069901767,
    posi: [554, 382]
  },
  {
    selected: false,
    type: '1',
    lng: 104.09824272523365,
    lat: 30.68394561131099,
    posi: [684, 516]
  },
  {
    selected: false,
    type: '1',
    lng: 104.09658984309529,
    lat: 30.67587037536364,
    posi: [729, 351]
  },
  {
    selected: false,
    type: '2',
    lng: 104.09076882339063,
    lat: 30.666303444228756,
    posi: [804, 578]
  },
  {
    selected: false,
    type: '1',
    lng: 104.08408543039639,
    lat: 30.6702173044404,
    posi: [929, 491]
  },
  {
    selected: false,
    type: '1',
    lng: 104.09357153658176,
    lat: 30.65990424850901,
    posi: [863, 654]
  }
]

const testLines = [
  {
    hasEdit: false,
    linePoint: [
      [462, 213],
      [554, 382]
    ],
    mapPosi: [
      [104.06281355592012, 30.691336960148348],
      [104.08013288615248, 30.691399069901767]
    ]
  },
  {
    hasEdit: false,
    linePoint: [
      [554, 382],
      [684, 516]
    ],
    mapPosi: [
      [104.08013288615248, 30.691399069901767],
      [104.09824272523365, 30.68394561131099]
    ]
  },
  {
    hasEdit: false,
    linePoint: [
      [684, 516],
      [804, 578]
    ],
    mapPosi: [
      [104.09824272523365, 30.68394561131099],
      [104.09076882339063, 30.666303444228756]
    ]
  },
  {
    hasEdit: false,
    linePoint: [
      [804, 578],
      [863, 654]
    ],
    mapPosi: [
      [104.09076882339063, 30.666303444228756],
      [104.09357153658176, 30.65990424850901]
    ]
  },
  {
    hasEdit: false,
    linePoint: [
      [554, 382],
      [729, 351]
    ],
    mapPosi: [
      [104.08013288615248, 30.691399069901767],
      [104.09658984309529, 30.67587037536364]
    ]
  },
  {
    hasEdit: false,
    linePoint: [
      [929, 491],
      [804, 578]
    ],
    mapPosi: [
      [104.08408543039639, 30.6702173044404],
      [104.09076882339063, 30.666303444228756]
    ]
  }
]

export default {
  name: 'pipShow',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      light: null,
      domW: 0,
      domH: 0,
      material: null,
      threeCenterPosi: {
        x: 0,
        y: 0
      },
      gdRadius: 2
    }
  },
  mounted() {
    this.init()
    this.animate()
  },
  methods: {
    // 初始化场景
    initThree() {
      const dom = document.getElementById('pipShow')
      const cW = dom.clientWidth
      const cH = dom.clientHeight
      this.domW = cW
      this.domH = cH
      this.threeCenterPosi = {
        x: cW / 2,
        y: cH / 2
      }
      let renderer = null
      renderer = new THREE.WebGLRenderer({
        antialias: true
      })

      renderer.setSize(this.domW, this.domH)
      this.renderer = renderer
      dom.appendChild(renderer.domElement)
      this.renderer.setClearColor(0x1c213e, 1.0)
    },
    // 初始化相机
    initCamera() {
      let camera = new THREE.PerspectiveCamera(45, this.domW / this.domH, 1, 10000)
      camera.position.set(0, 0, 400)
      this.camera = camera
      const controls = new OrbitControls(this.camera, this.renderer.domElement)
      controls.addEventListener('change', this.render)
    },
    // 初始化事物
    initScene() {
      this.scene = new THREE.Scene()
    },
    // 初始化灯光
    intiLight() {
      let light = new THREE.DirectionalLight(0xffffff, 1.0, 0)
      light.position.set(0, 0, 600)
      this.light = light
      this.scene.add(light)
    },
    initObject() {
      each(testLines, item => {
        const [startPoint, endPoint] = item.linePoint
        const x1 = startPoint[0] - this.threeCenterPosi.x
        const x2 = endPoint[0] - this.threeCenterPosi.x
        const y1 = startPoint[1] - this.threeCenterPosi.y
        const y2 = endPoint[1] - this.threeCenterPosi.y
        const v1 = new THREE.Vector3(x1, y1, 0)
        const v2 = new THREE.Vector3(x2, y2, 0)
        const path = new THREE.LineCurve3(v1, v2)
        const mesh = this.initMesh(path)
        this.scene.add(mesh)
      })
      each(testPoint, item => {
        const { posi, type } = item
        const [left, top] = posi
        const x = left - this.threeCenterPosi.x
        const y = top - this.threeCenterPosi.y
        this.buildHouse(type, x, y)
      })
    },
    initMesh(path) {
      const shape = new THREE.Shape()
      shape.absarc(0, 0, this.gdRadius, 0, Math.PI * 2, false)
      const geometry = new THREE.ExtrudeGeometry(shape, {
        bevelEnabled: false,
        steps: 1,
        extrudePath: path
      })
      return new THREE.Mesh(geometry, this.material)
    },
    initMaterial() {
      this.material = new THREE.MeshPhysicalMaterial({
        color: 0xffffff,
        metalness: 1.0,
        roughness: 0.6
      })
    },
    initAxis() {
      const axisHelper = new THREE.AxisHelper(100)
      this.scene.add(axisHelper)
    },
    gasHouse(x, y) {
      const houseGeo = new THREE.BoxBufferGeometry(30, 20, this.gdRadius * 2)
      const ztGeo1 = new THREE.CylinderBufferGeometry(6, 6, 10)
      const ztGeo2 = new THREE.CylinderBufferGeometry(4, 4, 5)
      const houseMaterial = new THREE.MeshBasicMaterial({ color: 0x947634 })
      const ztMaterial1 = new THREE.MeshBasicMaterial({ color: 0x333333 })
      const ztMaterial2 = new THREE.MeshBasicMaterial({ color: 0xffffff })
      const house = new THREE.Mesh(houseGeo, houseMaterial)
      const zt1 = new THREE.Mesh(ztGeo1, ztMaterial1)
      const zt2 = new THREE.Mesh(ztGeo2, ztMaterial2)
      house.position.set(x, y)
      zt1.position.set(x - 5, y)
      zt2.position.set(x + 6, y)
      zt1.rotateX(Math.PI / 2)
      zt2.rotateX(Math.PI / 2)
      zt1.translateY(3)
      zt2.translateY(3)
      this.scene.add(house)
      this.scene.add(zt1)
      this.scene.add(zt2)
    },
    adjustHouse(x, y) {
      const gHouseGeo = new THREE.BoxBufferGeometry(20, 10, this.gdRadius * 2)
      const ztGeo = new THREE.CylinderBufferGeometry(4, 4, 5)
      const houseMaterial = new THREE.MeshBasicMaterial({ color: 0x947634 })
      const ztMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff })
      const house = new THREE.Mesh(gHouseGeo, houseMaterial)
      const zt = new THREE.Mesh(ztGeo, ztMaterial)
      house.position.set(x, y)
      zt.position.set(x, y)
      zt.rotateX(Math.PI / 2)
      zt.translateY(3)
      this.scene.add(house)
      this.scene.add(zt)
    },
    buildHouse(type, x, y) {
      switch (Number(type)) {
        case 2:
          this.adjustHouse(x, y)
          break
        case 1:
          this.gasHouse(x, y)
          break
        default:
          break
      }
    },
    // 初始化
    init: function() {
      this.initThree()
      this.initCamera()
      this.initScene()
      this.intiLight()
      this.initMaterial()
      this.initObject()
      // this.initAxis()
      this.renderer.clear()
      this.render()
    },
    render() {
      this.renderer.render(this.scene, this.camera)
    },
    // 动画
    animate: function() {
      this.render()
    }
  }
}
</script>
<style scope lang="less">
.pip-show-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  .pip-show {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
</style>
